<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>总览</title>
    <link href="static/css/overview.css" rel="stylesheet"/>
    <link href="static/css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
    <link href="static/css/other/style.min.css" rel="stylesheet"/>
    <link href="static/css/bootstrap/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="static/css/bootstrap/bootstrap-select.min.css" rel="stylesheet"/>
    <link>
</head>
<body class="gary-bg kjtc-body">
<div class="overview-wrapper">
    <!-- 第一行 -->
    <div class="overview-row">
        <div class="col-sm-3 half-spacing">
            <div class="ibox float-e-margins overview-ibox">
                <div class="ibox-title title-one">
                    <span class="theme-text">充电电量</span>
                    <span class="date-one bg-darkGreen">今天</span>
                </div>
                <div class="ibox-content content-one">
                    <span class="value color-darkgreen">200,000</span>
                    <span class="unit">度</span>
                    <img class="icon-arrow-percent" src="static/images/arrows/overview_arrow_up_green.png"/>
                    <span class="percent">2%</span>
                </div>
            </div>
        </div>
        <div class="col-sm-3 half-spacing">
            <div class="ibox float-e-margins overview-ibox">
                <div class="ibox-title title-one">
                    <span class="theme-text">订单数</span>
                    <span class="date-one bg-darkGreen">今天</span>
                </div>
                <div class="ibox-content content-one">
                    <span class="value color-darkgreen">3,215</span>
                    <span class="unit">次</span>
                    <img class="icon-arrow-percent" src="static/images/arrows/overview_arrow_down_green.png"/>
                    <span class="percent">2%</span>
                </div>
            </div>
        </div>
        <div class="col-sm-3 half-spacing">
            <div class="ibox float-e-margins overview-ibox">
                <div class="ibox-title title-one">
                    <span class="theme-text">充电金额</span>
                    <span class="date-one bg-blue">今天</span>
                </div>
                <div class="ibox-content content-one">
                    <span class="value color-blue">213,000</span>
                    <span class="unit">元</span>
                    <img class="icon-arrow-percent" src="static/images/arrows/overview_arrow_up_blue.png"/>
                    <span class="percent">2%</span>
                </div>
            </div>
        </div>
        <div class="col-sm-3 half-spacing">
            <div class="ibox float-e-margins overview-ibox">
                <div class="ibox-title title-one">
                    <span class="theme-text">充电金额</span>
                    <span class="date-one bg-orange">本月</span>
                </div>
                <div class="ibox-content content-one">
                    <span class="value color-orange">9,698,000</span>
                    <span class="unit">元</span>
                    <img class="icon-arrow-percent" src="static/images/arrows/overview_arrow_up_orange.png"/>
                    <span class="percent">2%</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 第二行 -->
    <div class="overview-row">
        <div class="col-sm-12 half-spacing">
            <div class="ibox float-e-margins overview-ibox">
                <div class="content-two">
                    <select id="chartSelect" class="box-select pull-right">
                        <option value="">7天内</option>
                        <option value="">1个月内</option>
                        <option value="">3个月内</option>
                        <option value="">6个月内</option>
                        <option value="">一年内</option>
                        <option value="">自定义时间</option>
                    </select>
                    <div id="chargingSumChart" class="content-chart"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第三行 -->
    <div class="overview-row">
        <div class="col-sm-4 half-spacing">
            <div class="ibox float-e-margins overview-ibox">
                <div class="ibox-title title-three">
                    <span class="theme-text">排行榜TOP5</span>
                </div>
                <div class="ibox-content content-three">
                    <div class="content-three-toolbox">
                        <!-- 按钮 -->
                        <button class="box-button box-button-active">按金额</button>
                        <button class="box-button box-button-inactive">按次数</button>
                        <div class="pull-right">
                            <!-- 时间选择器 -->
                            <select class="box-select">
                                <option value="">7天内</option>
                                <option value="">1个月内</option>
                                <option value="">3个月内</option>
                                <option value="">6个月内</option>
                                <option value="">一年内</option>
                                <option value="">自定义时间</option>
                            </select>
                        </div>
                    </div>
                    <table class="box-table-1" id="RankingTop5Table"></table>
                </div>
            </div>
        </div>
        <div class="col-sm-4 half-spacing">
            <div class="ibox float-e-margins overview-ibox">
                <div class="ibox-title title-three">
                    <span class="theme-text">待退款订单</span>
                    <span class="theme-text">(6)</span>
                </div>
                <div class="ibox-content content-three">
                    <table class="box-table-1" id="pendingRefundOrderTable"></table>
                </div>
            </div>
        </div>
        <div class="col-sm-4 half-spacing">
            <div class="ibox float-e-margins overview-ibox">
                <div class="ibox-title title-three">
                    <span class="theme-text">故障日志</span>
                    <span class="theme-text">(10)</span>
                    <!--  原型改了
                    <div class="pull-right">
                        <select class="box-select">
                            <option value="">7天内</option>
                            <option value="">1个月内</option>
                            <option value="">3个月内</option>
                            <option value="">6个月内</option>
                            <option value="">一年内</option>
                            <option value="">自定义时间</option>
                        </select>
                    </div>
                    -->
                </div>
                <div class="ibox-content content-three">
                    <table class="box-table-2" id="faultLogTable">
                        <tbody>
                            <tr>
                                <td class="log-td log-td-1">
                                    <span class="log-type color-brown">故障</span>
                                </td>
                                <td class="log-td log-td-2">
                                    <span class="log-station">交大充电站</span>
                                    <span class="log-equipment">2#直流充电桩</span>
                                    <span class="log-details">熔断器断开</span>
                                </td>
                                <td class="log-td log-td-3">
                                    <span class="log-datetime">2018-11-13 12:24:36</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="log-td log-td-1">
                                    <span class="log-type color-amaranthine">通讯断开</span>
                                </td>
                                <td class="log-td log-td-2">
                                    <span class="log-station">交大充电站</span>
                                    <span class="log-equipment">2#直流充电桩</span>
                                    <span class="log-details">通讯断开</span>
                                </td>
                                <td class="log-td log-td-3">
                                    <span class="log-datetime">2018-11-13 12:24:36</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="log-td log-td-1">
                                    <span class="log-type color-brown">故障</span>
                                </td>
                                <td class="log-td log-td-2">
                                    <span class="log-station">交大充电站</span>
                                    <span class="log-equipment">2#直流充电桩</span>
                                    <span class="log-details">熔断器断开</span>
                                </td>
                                <td class="log-td log-td-3">
                                    <span class="log-datetime">2018-11-13 12:24:36</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="log-td log-td-1">
                                    <span class="log-type color-amaranthine">通讯断开</span>
                                </td>
                                <td class="log-td log-td-2">
                                    <span class="log-station">交大充电站</span>
                                    <span class="log-equipment">2#直流充电桩</span>
                                    <span class="log-details">通讯断开</span>
                                </td>
                                <td class="log-td log-td-3">
                                    <span class="log-datetime">2018-11-13 12:24:36</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="static/js/jquery/jquery.min.js"></script>
<script src="static/js/bootstrap/bootstrap.min.js"></script>
<script src="static/js/bootstrap/bootstrap-table.js"></script>
<script src="static/js/bootstrap/bootstrap-table-zh-CN.min.js"></script>
<script src="static/js/bootstrap/bootstrap-select.min.js"></script>
<script src="static/js/plugins/echarts/echarts.common.min.js"></script>
<script src="static/js/other/common.js"></script>
<script src="static/js/overview.js"></script>
</html>